<template>
	<view class="main">
		<view class="title">
			<input v-model="addInfo.title" type="text" placeholder="标题(必填)" />
		</view>
		<textarea class="info" v-model="addInfo.info" placeholder="请开始你的表演..." />
		<button class="button" @click="add">发布</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import api from '../../script/api.js'
	import tools from '../../script/tools.js'
	import {
		userinfoStore
	} from '../../store/index.js'

	import {
		storeToRefs
	} from 'pinia'

	const {
		updateUserInfo
	} = userinfoStore()

	const {
		islogin,
		userinfo
	} = storeToRefs(userinfoStore())

	const addInfo = ref({
		title: '',
		info: '',
	})

	const add = () => {
		api.post('/message', addInfo.value, (resp) => {
			if (resp.success) {
				uni.showToast({
					title: '发布成功'
				})
				addInfo.value.title = ''
				addInfo.value.info = ''
			} else if (resp.code == 501) {
				uni.showToast({
					title: resp.message,
					icon: 'error',
				})
			} else if (resp.code == 1000) {
				uni.showToast({
					title: '请先登录',
					icon: 'error',
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 0 20px;
	}

	.title {
		box-sizing: border-box;
		padding: 10px 0;
		width: 100%;
		border-bottom: 0.5px solid #dcdcdc;

		&:hover {
			border-bottom: 0.5px solid #1890ff;
		}
	}

	.info {
		box-sizing: border-box;
		width: 100%;
		padding: 10px 0;
	}

	.button {
		color: #fff;
		background-color: #1890ff;
	}
</style>